<template>
  <div class="page-container">
    <h2 class="page-title">客服中心</h2>
    <div class="grid">
      <el-card class="card" shadow="hover">
        <div class="name">在线客服</div>
        <div class="desc">工作日 9:00-18:00</div>
        <el-button type="primary" size="small">开始咨询</el-button>
      </el-card>
      <el-card class="card" shadow="hover">
        <div class="name">售后服务</div>
        <div class="desc">订单售后、退换申请</div>
        <el-button size="small">查看入口</el-button>
      </el-card>
      <el-card class="card" shadow="hover">
        <div class="name">常见问题</div>
        <div class="desc">支付、配送、发票</div>
        <el-button size="small" @click="$router.push('/help')">前往</el-button>
      </el-card>
    </div>
  </div>
</template>
<script setup>
</script>
<style scoped>
.page-container { max-width: 1000px; margin: 0 auto; padding: var(--spacing-xl); }
.page-title { font-size: var(--font-size-xl); font-weight: var(--font-weight-bold); margin-bottom: var(--spacing-lg); }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--spacing-lg); }
.card { display: flex; flex-direction: column; gap: var(--spacing-sm); }
.name { font-weight: var(--font-weight-medium); }
.desc { color: var(--text-secondary); }
</style>